<!-- 兑换成功弹窗 -->
<template>
  <uni-popup ref="popup">
    <div class="container">
      <div class="title">
        恭喜你
      </div>
      <div class="desc">
        {{ props.desc }}
      </div>
      <image
        class="gift-img"
        :src="props.giftImg"
        mode="aspectFill"
      />
      <div class="gift-title">
        {{ props.giftName }}
      </div>
      <button
        class="btn"
        @click="btnClick"
      >
        查看
      </button>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { navigateTo } from '@/utils/navigate';

const currentInstance = getCurrentInstance();

type Props = {
  /** 礼品id */
  giftId: string
  /** 兑换成功说明 */
  desc: string
  /** 礼品图片 */
  giftImg: string
  /** 礼品名称 */
  giftName: string
  /** 课程id */
  courseId?: string
}

const props = withDefaults(defineProps<Props>(), {
  giftId: '1',
  desc: '',
  giftImg: '',
  giftName: '',
  courseId: undefined,
});

/** 「查看」按钮点击事件 */
const btnClick = () => {
  const currentPages = getCurrentPages();
  const pageName = currentPages[currentPages.length - 1].route?.split('/')[1];

  // 如果有课程id，就跳转到课程详情页面
  if (props.courseId) {
    navigateTo('CourseDetail', { courseId: props.courseId });
    close();
    return;
  }

  // 如果不在礼品详情页面，就跳转过去
  if (pageName !== 'gift-detail') {
    navigateTo('gift-detail', { giftId: props.giftId });
  }
  close();
};

// #region 弹窗控制相关
/** 弹窗打开 */
const open = () => {
  console.log('open');
  const popup = currentInstance?.refs.popup as any;
  popup?.open();
};

/** 弹窗关闭 */
const close = () => {
  const popup = currentInstance?.refs.popup as any;
  popup?.close();
};

defineExpose({
  open,
  close,
});
// #endregion
</script>

<style scoped lang="scss">
.container {
  width: 73.8462vw;
  height: 96.9231vw;

  background: linear-gradient(180deg, #faf1e2, #f5e0c9 100%);
  border: 1px solid #fff;
  border-radius: 16px;

  display: grid;
  grid-template:
    'title' 8.9744vw
    '.' 29px
    'desc' 5.641vw
    '.' 18px
    'gift-img' 32.8205vw
    '.' 9px
    'gift-title' auto
    '.' 1fr
    'btn' 12.3077vw
    '.' 24px
    / 1fr;
  justify-items: center;

  // 标题
  .title {
    grid-area: title;

    width: 169px;
    height: 35px;

    background: linear-gradient(90deg, #ed8239, #f4ca78 100%);
    border-radius: 0 0 30px 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }

  // 描述文字
  .desc {
    grid-area: desc;

    font-size: 16px;
    color: #743920;
  }

  // 礼品图片
  .gift-img {
    grid-area: gift-img;

    width: 32.8205vw;
    height: 32.8205vw;

    background: #fff;
  }

  // 礼品名称
  .gift-title {
    grid-area: gift-title;

    width: 70%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 6.1538vw;
    font-weight: bold;
    color: #ec5f72;
    text-align: center;
  }

  // 按钮
  .btn {
    grid-area: btn;

    width: 208px;
    height: 48px;

    background: linear-gradient(103deg, #ff825e 0%, #ff6c87 100%, #f24ebd 100%);
    border-radius: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    font-weight: bold;
    color: #fff;
  }

}
</style>
